const htmlwebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const miniExtractCss = require('mini-css-extract-plugin')

module.exports = {
  //打包的模式 1：development 2:production
  mode: "production",
  //打包的入口文件
  // entry: "./src/main.js",
  entry:{
    'main': "./src/main.js",
    'detail': "./src/detail.js"
  },
  devtool: 'inline-source-map',
  //出口
  output: {
    //打包后文件输出的文件夹
    path: path.join(__dirname, './dist/'),
    //打包完的文件名字，hash文件的唯一标识
    filename: '[name]-[hash].js'
  },
  //参考：https://webpack.docschina.org/configuration/dev-server/
  devServer: {
    //打开浏览器
    open: true
  },
  module: {
    //规则
    rules: [
      {
        test: /\.scss$/,
        //执行顺序，从右向左
        use: [
          // {
          // loader: "style-loader" // 将 JS 字符串生成为 style 节点
          // },
          //将css单独提取到一个文件
          {
            loader: miniExtractCss.loader
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          }, {
            loader: "sass-loader" // 将 Sass 编译成 CSS
          }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //转换成base64范围
              limit: 102400
            }
          }
        ]
    }
    
    
    ]
  },
  plugins: [
    new htmlwebpackPlugin({
      //打包依赖的模板文件
      template: path.join(__dirname, './public/index.html'),
      //打包完成后的文件名称
      filename: "index.html",
      chunks:['main']
    }),
    new htmlwebpackPlugin({
      //打包依赖的模板文件
      template: path.join(__dirname, './public/index.html'),
      //打包完成后的文件名称
      filename: "detail.html",
      chunks:['detail']
    }),
    new miniExtractCss({
      filename: 'common-[hash].css'
    })
  ]
}